<template>
  <div class="dashboard-container">
    <!-- 第一行 -->
    <el-row :gutter="20" class="dashboard-row">
      <el-col :span="14">
        <el-card class="agencies">
          <p class="overview">机构概叙</p>
          <div class="content">
            <div class="left_content">
              <div class="organName">{{ organOverview.organName }}</div>
              <div class="organAddress">
                地址：{{ organOverview.organAddress }}
              </div>
              <div class="principal">
                负责人：{{ organOverview.principal }}{{ organOverview.phone }}
              </div>
              <el-button
                class="search-sales-department"
                @click="dialogVisible = true"
              >查看营业部分布</el-button>
            </div>
            <div class="right_content">
              <div class="item">
                <div>
                  <div class="top">分拣中心(个)</div>
                  <div class="num">{{ organOverview.sortingCenterNumber }}</div>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="top">营业部(个)</div>
                  <div class="num">{{ organOverview.agencyNumber }}</div>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="top">司机人数(个)</div>
                  <div class="num">{{ organOverview.driverNumber }}</div>
                </div>
              </div>
              <div class="item">
                <div>
                  <div class="top">营业部(个)</div>
                  <div class="num">{{ organOverview.courierNumber }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="todayData">
          <div class="header">
            <p class="todayTitle">今日数据</p>
            <div class="refresh-box">
              {{ refreshDate }}
            </div>
          </div>
          <div class="content">
            <el-row justify="center">
              <el-col :span="8">
                <div class="item">
                  <div class="label">订单金额(元)</div>
                  <div class="today_price">{{ orderAmount.toFixed(0) }}</div>

                  <div class="yesterday">
                    较昨日+{{ orderAmountChanges.toFixed(0) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item">
                  <div class="label">订单数量(笔)</div>
                  <div class="today_price">{{ orderNumber.toFixed(0) }}</div>
                  <div class="yesterday">
                    较昨日+{{ orderNumberChanges.toFixed(0) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="item">
                  <div class="label">运输任务(次)</div>
                  <div class="today_price">
                    {{ transportTaskNumber.toFixed(0) }}
                  </div>
                  <div class="yesterday">
                    较昨日+{{ transportTaskNumberChanges.toFixed(0) }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行  -->
    <el-row :gutter="20">
      <el-col :span="14" class="task">
        <el-card class="box-card">
          <div class="header">
            <p>
              待办任务
              <el-tooltip class="item" effect="light" placement="bottom-start">
                <template #content>
                  待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br>
                  待派送率=待派送/(待派送+派送中+已签收+拒收) <br>
                  未分配率=未分配/全部数据 <br>
                  超时率=超时任务/(已完成+进行中+已取消）<br>
                </template>
                <img
                  src=""
                  alt=""
                >
              </el-tooltip>
            </p>
            <div>
              <span>{{ refreshDate }}</span>
            </div>
          </div>
          <div class="content">
            <waterEcharts :task="task" />
            <div class="bottom-label">
              <div class="item">待取件</div>
              <div class="item">待派件</div>
              <div class="item">未分配运输</div>
              <div class="item">超时运输</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" class="task">
        <el-card class="box-card">
          <div class="header">
            <p>执行中任务</p>
            <div>
              <span>{{ refreshDate }}</span>
            </div>
          </div>
          <div class="content">
            <waterEcharts :task="taskProgress" />
            <div class="bottom-label">
              <div class="item">运输中</div>
              <div class="item">派送中</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row>
      <el-col :span="24">
        <el-card class="useFeatureList">
          <div class="header"><p>常用功能</p></div>
          <div class="content">
            <template>
              <div
                v-for="(item, index) in useFeatureList"
                :key="index"
                class="item"
                @click="$router.push({ path: item.link })"
              >
                <img :src="item.url" alt="">
                <span class="FeatureText">{{ item.label }}</span>
              </div>
            </template>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第四行 -->
    <el-row :gutter="15">
      <el-col :span="12" class="LineManagement">
        <el-card>
          <div class="header">
            <p class="subMarginTop">线路管理</p>
          </div>
          <div class="content">
            <!-- 放入地图组件 -->
            <MapEcharts />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="TransportationTasks">
        <el-card>
          <div class="header">
            <p
              class="subMarginTop"
              @click="$router.push({ path: '/transport/transport-task' })"
            >
              运输任务
            </p>
            <div
              class="search-more"
              @click="$router.push({ path: '/transport/task' })"
            >
              查看更多
            </div>
          </div>
          <div class="content">
            <transportTask :transport-task-list="transportTaskList" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第五行 -->
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card>
          <div class="header">
            <p class="subMarginTop">订单总量</p>
            <div>{{ refreshDate }}</div>
          </div>
          <div class="content">
            <orderTotalEcharts />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="header">
            <p class="subMarginTop">订单分布</p>
            <div>{{ refreshDate }}</div>
          </div>
          <div class="content">
            <orderDistribution />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      class="map_dis"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <button @click="dialogVisible = false" />
      <img src="@/assets/department_map.png" alt="">
    </el-dialog>
    <Footer />
  </div>
</template>
<script>
import { getWorkspaceData } from '@/api/dashboard'
// 导入gsap 制作数字递增动画
import gsap from 'gsap'
import waterEcharts from './components/waterEcharts.vue'
import transportTask from './components/transportTask.vue'
import MapEcharts from './components/MapEcharts.vue'
import orderDistribution from './components/orderDistribution'
import orderTotalEcharts from './components/orderTotalEcharts.vue'
import { useFeatureList } from '@/api/static'
export default {
  name: 'Dashboard',
  components: {
    // 水滴图
    waterEcharts,
    // 运输任务滚动图
    transportTask,
    // 地图
    MapEcharts,
    // 订单总量图
    orderTotalEcharts,
    // 订单分布图
    orderDistribution
  },
  data() {
    return {
      dialogVisible: false,
      backlog: {},
      orderLineChart: {},
      organOverview: {},
      todayData: {},
      // 传递给水滴echarts的属性
      // 在进行的任务
      task: [],
      taskProgress: [],
      // 运输任务列表
      transportTaskList: [],
      // 最新时间,
      refreshDate: new Date().toLocaleString(),
      orderAmount: 0,
      orderAmountChanges: 0,
      orderNumber: 0,
      orderNumberChanges: 0,
      transportTaskNumber: 0,
      transportTaskNumberChanges: 0
    }
  },

  watch: {
    'todayData.orderAmount': function(newValue) {
      gsap.to(this.$data, { duration: 1, orderAmount: newValue })
    },
    'todayData.orderAmountChanges': function(newValue) {
      gsap.to(this.$data, { duration: 1, orderAmountChanges: newValue })
    },
    'todayData.orderNumber': function(newValue) {
      gsap.to(this.$data, { duration: 1, orderNumber: newValue })
    },
    'todayData.orderNumberChanges': function(newValue) {
      gsap.to(this.$data, { duration: 1, orderNumberChanges: newValue })
    },
    'todayData.transportTaskNumber': function(newValue) {
      gsap.to(this.$data, { duration: 1, transportTaskNumber: newValue })
    },
    'todayData.transportTaskNumberChanges': function(newValue) {
      gsap.to(this.$data, {
        duration: 1,
        transportTaskNumberChanges: newValue
      })
    }
  },
  created() {
    this.getWorkspaceData()
    this.useFeatureList = useFeatureList
  },
  methods: {
    async getWorkspaceData() {
      const {
        backlog,
        orderLineChart,
        organOverview,
        todayData,
        transportTaskList
      } = await getWorkspaceData()
      this.backlog = backlog
      this.$nextTick(() => {
        for (const key in this.backlog) {
          if (key.includes('Rate')) {
            this.task.push({ [key]: this.backlog[key] })
          }
        }
        for (const key in this.todayData) {
          if (key.includes('Rate')) {
            this.taskProgress.push({ [key]: this.todayData[key] })
          }
        }
      })
      this.orderLineChart = orderLineChart
      console.log(orderLineChart)
      this.organOverview = organOverview
      this.todayData = todayData
      this.transportTaskList = transportTaskList
      this.transportTaskList.push(...this.transportTaskList)
    }
    // 渲染地图
  }
}
</script>

<style lang="scss" scoped>
.subMarginTop {
  margin-top: 0;
  font-weight: 700;
}
.el-card__body > .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
::v-deep .map_dis {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    position: relative;
    left: -100px;
    top: 0;
    padding: 0;
    height: 600px;
    /* overflow: hidden; */
    button {
      /* display: none; */
      width: 40px;
      height: 40px;
      position: absolute;
      top: 5px;
      right: -275px;
      cursor: pointer;
      opacity: 0;
    }
    img {
      width: 800px;
      height: 600px;
      object-fit: contain;
    }
  }
}
.dashboard-container {
  padding: 20px;
  min-height: calc(100vh - 60px);
  background-color: #f3f4f7;
  .el-row {
    margin-bottom: 20px;
  }
  .agencies {
    height: 100%;
    .overview {
      margin-top: 0;
      font-size: 16px;
      font-weight: 700;
    }
    .content {
      display: flex;
      justify-content: space-between;
      .left_content {
        border-right: 1px solid #ebeef5;
        flex: 50%;
        .organName {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 13px;
        }
        .organAddress {
          font-size: 14px;
          margin-bottom: 8px;
          color: #818693;
        }
        .principal {
          font-size: 14px;
          margin-bottom: 23px;
          color: #818693;
        }
        .search-sales-department {
          font-size: 14px;
          color: #e15536;
          width: 158px;
          height: 40px;
          background: #ffeeeb;
          border: 1px solid #f3917c;
          border-radius: 4px;
          cursor: pointer;
          &:hover {
            background: #ff6b4a !important;
            border-color: transparent !important;
            color: #fff !important;
          }
        }
      }
      .right_content {
        display: flex;
        width: 300px;
        flex-wrap: wrap;
        flex: 50%;
        .item {
          height: 77px;
          text-align: center;
          width: 194px;
          &:nth-chid(2) {
            padding-right: 20px;
          }
          .top {
            font-size: 14px;
            margin-bottom: 10px;
          }
          .num {
            font-size: 32px;
            font-weight: 700;
            color: #e15536;
            cursor: pointer;
          }
        }
      }
    }
  }

  .todayData {
    .el-card__body {
      height: 100%;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .todayTitle {
        margin-top: 0;
        font-size: 16px;
        font-weight: 700;
      }
      .refresh-box {
        &:before {
          content: "";
        }
      }
    }
    .content {
      margin-top: 12px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .label {
          margin-bottom: 21px;
        }
        .today_price {
          font-size: 36px;
          color: #20232a;
          font-weight: 700;
          margin-bottom: 24px;
        }
        .yesterday {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            top: 1px;
            width: 15px;
            height: 15px;
            background-image: url("../../assets/rise.png");
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
  .task {
    text-align: center;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      p {
        margin-top: 0;
        display: flex;
        align-items: flex-start;
        font-weight: 700;
        .item {
          line-height: 28px;
          color: #818693;
          font-size: 14px;
          background: #fff;
        }
        img {
          margin-left: 5px;
          width: 20px;
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      align-content: center;
      .bottom-label {
        display: flex;
        .item {
          font-weight: 700;
          flex: 1;
        }
      }
    }
  }
  // 常用功能
  .useFeatureList {
    .header {
      p {
        margin-top: 0;
        font-weight: 700;
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 15.15%;
        height: 116px;
        background: #fafafb;
        border-radius: 10px;
        cursor: pointer;
        img {
          margin-top: 20px;
          width: 40px;
        }
        &:hover span {
          color: #e15536;
        }
        span {
          font-weight: 700;
          margin: 16px 0;
        }
      }
    }
  }
  .TransportationTasks {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      p {
        margin-top: 0;
        font-weight: 700;
      }
      .search-more {
        font-size: 14px;
        color: #818693;
        cursor: pointer;
        &::before {
          content: "";
          position: relative;
        }
      }
    }
  }
  // 第四行table数据
  .LineManagement {
    .header {
      p {
        margin-top: 0;
        font-weight: 700;
      }
    }
    .el-card__body {
      padding: 0;
    }
  }

  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
}
</style>
